const path = require('path') // 引入path模块
function resolve(dir) {
  //path.join(__dirname)设置绝对路径；配置路径
  return path.join(__dirname, dir)
}

module.exports = {
  // 部署开发环境和生产环境
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

  // 输出目录
  outputDir: 'dist',

  // 静态资源
  assetsDir: 'assets',

  //打包减小体积,去除.map文件
  productionSourceMap: false,

  configureWebpack: {
    devServer: {
      host: 'localhost', // 主机名
      port: 8080, // 端口号
      https: false,
      open: true, // 浏览器自动打开
      proxy: {
        // 配置跨域
        '/api': {
          // 代理1
          target: 'http://localhost:3000',
          ws: true, //  如果是http代理此处可以不用设置
          changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    }
  },

  css: {
    // 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less(us)?) 文件视为 CSS Modules 模块。
    requireModuleExtension: true,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false
    // 是否使用css分离插件
    // 当为true的时候，更改vue的css浏览器不刷新；为false的时候刷新
    extract: false,
    // 开启 CSS source maps?为false,减少css打包体积
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {}
  },

  chainWebpack: config => {
    // 修改文件引入自定义路径
    config.resolve.alias.set('@', resolve('src')).set('style', resolve('src/images'))
  },

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'stylus',
      patterns: []
    }
  }
}
